<template>
  <el-checkbox-group v-model="dataValue" >
    <el-checkbox
      v-for="item in data"
      :key="item[config.valueKey]"
      :label="item[config.valueKey]"
    >
      {{ item[config.labelKey] }}
    </el-checkbox>
  </el-checkbox-group>

</template>

<script>
export default {
  name: 'CheckBoxGroup',
  props:{
    config:{
      type:Object,
      default:()=>{
        return{
          labelKey:'label',
          valueKey:'value',
        }
      }
    },
    value:{
      type:Array,
      default:()=>[]
    },
    size:{
      type:String,
      default:'mini',
    },
    useOptions:{
      type:Boolean,
      default:false
    },
    options:{
      type:Array,
      default:()=>[]
    },
    condition:{
      type:Object,
      default:()=>{
        return{}
      }
    },
    asyncFun:{
      type:Function,
      default:function(){
        return new Promise(function(resolve, reject){
          try{
            resolve();
          }catch (e){
            reject(e)
          }
        });
      }
    }
  },
  data(){
    return{
      data:[],
    }
  },
  computed:{
    dataValue:{
      get(){
        return this.value;
      },
      set(newVal){
        this.$emit('input',newVal)
      }
    }
  },
  mounted() {
    this.loadData();
  },
  methods:{
    loadData(){
      if(this.$props.useOptions){
        return this.$props.options;
      }else{
        this.$props.asyncFun(this.$props.condition).then(res =>{
          this.data = res.data
        })
      }
    },

  }


}
</script>

<style scoped>

</style>
